<template>
	<view v-if="showCamera" class="camera-box">
		<camera device-position="back" :flash="flash" style="width: 100%; height: 100vh" :mode="mode" @scancode="scancode"
			@error="error">
			<image 
				class="close-btn" 
				src="@/static/close.png" 
				:style="{
					top: statusBarHeight + 'px',
				}" 
				@click="back" 
			/>
			
			<!-- 补光 -->
			<view class="flash" :class="[flash]" @click="changeFlash">
				<image class="flash_img" src="@/static/flash.png" />
			</view>
			
			<!-- 图片控件 -->
			<block v-if="tempImagePath">
				<image class="image" :src="tempImagePath" />
				<view class="btn-group flex_between check-box">
					<view class="" @click="tempImagePath = ''">
						<image class="icon" src="@/static/cancel.png" />
					</view>
					<view class="" @click="upload">
						<image class="icon" src="@/static/checked.png" />
					</view>
				</view>
			</block> 

			<!-- 相机控件 -->
			<block v-else>
				<image v-if="mode === 'scanCode'" class="image" src="@/static/scan-remark.png" />
				<image v-if="mode === 'scanCode'" class="scan-bar" src="@/static/scan-bar.png" />
				<view class="btn-group flex_center" v-if="mode === 'normal'">
					<view class="take-photos" @click="takePhoto">
						<image class="take-photos_img" src="@/static/beat.png" />
						<view>拍照</view>
					</view>
					<view class="album" @click="chooseImage">
						<image class="album_img" src="@/static/album.png" />
						<view>相册</view>
					</view>
				</view>
			</block>
		</camera>
	</view>
</template>

<script>
	import {
		getPermission
	} from '@/util/utils.js'
	export default {
		data() {
			return {
				showCamera: false,
				tempImagePath: '',
				statusBarHeight: 44,
				mode: '',
				typeTwo: '',
				flash: 'auto'
			}
		},
		onLoad(options) {
			this.mode = options.mode;
			this.typeTwo = options.typeTwo;
			console.log(this.typeTwo)
		},
		onShow() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10
			this.getPermission()
		},
		methods: {
			getPermission() {
				getPermission({
					permission: 'camera',
					permissionName: '摄像头',
					success: () => {
						this.showCamera = true
					},
					cancel: () => {
						this.back()
					}
				})
			},
			
			// 打开相册
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'], // 只能从相册选图片
					success: (res) => {
						this.tempImagePath = res.tempFilePaths[0]
					}
				})
			},
			
			// 补光
			changeFlash() {
				if(this.flash === 'auto') {
					this.flash = 'torch'
				}else if(this.flash === 'torch') {
					this.flash = 'auto'
				}
			},
			
			// 拍照
			takePhoto() {
				const ctx = uni.createCameraContext()
				ctx.takePhoto({
					success: (res) => {
						this.tempImagePath = res.tempImagePath
					}
				})
			},
			
			// 上传图片
			upload() {
				uni.showLoading({
					mask: true,
					title: '上传中，请稍后'
				})

				// 模拟网络请求解析数据
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
					setTimeout(() => {
						this.back()
					}, 1500)
				}, 2000)
			},
			
			// 扫码结果
			scancode(e) {
				if (!this._scanResult) {
					this._scanResult = e.detail.result
					this.playMusic()
				}
			},
			
			// 扫码提示音
			playMusic() {
				const innerAudioContext = wx.createInnerAudioContext()
				innerAudioContext.autoplay = true
				innerAudioContext.src = '@/static/scan-video.mp3'
				innerAudioContext.onPlay(() => {
					this.redirectTo()
				})
				innerAudioContext.onError(() => {
					this.redirectTo()
				})
			},
			
			redirectTo() {
				setTimeout(()=>{
					console.log(this._scanResult);
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.result = this._scanResult;
					prevPage.$vm.type = this.typeTwo;
					uni.navigateBack({
						delta: 1
					})
					// uni.redirectTo({
					// 	url: `/pages/index/addDevice?result=${this._scanResult}&type=${this.type}`,
					// })
				}, 500)
			},
			
			back() {
				uni.navigateBack()
			},
			
			error(e) {
				console.error('相机初始化失败', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.camera-box {
		width: 100%;
		height: 100vh;
		text-align: center;
		color: white;
		position: fixed;

		.close-btn {
			position: fixed;
			width: 50rpx;
			height: 50rpx;
			left: 30rpx;
			z-index: 999;
		}
		
		.flash {
			position: absolute;
			top: 240rpx;
			right: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			&.torch::before {
				content: '';
				position: absolute;
				width: 100%;
				height: 2rpx;
				background-color: #fff;
				transform: rotate(45deg);
				left: 0;
				top: 42%;
			}
			&_img {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.image {
			width: 100%;
			height: 100vh;
			z-index: 1;
		}

		.scan-bar {
			position: absolute;
			left: 50%;
			top: 23vh;
			width: 428rpx;
			height: 12rpx;
			transform: translateX(-50%);
			z-index: 1;
			animation: scan 1.6s linear infinite;
		}

		.btn-group {
			width: 100%;
			z-index: 999;
			position: fixed;
			bottom: 100rpx;

			.take-photos {
				font-size: 24rpx;
				font-weight: 400;

				&_img {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 30rpx;
				}
			}
			
			.album {
				position: absolute;
				bottom: 0rpx;
				right: 100rpx;
				font-size: 24rpx;
				font-weight: 400;

				&_img {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 30rpx;
				}
			}

			&.check-box {
				padding: 0 110rpx;
				box-sizing: border-box;

				.icon {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.flex_center {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		@keyframes scan {
			0% {
				top: 23vh;
				opacity: 0;
			}

			15% {
				opacity: 1;
			}

			90% {
				opacity: 1;
			}

			100% {
				top: 55.5vh;
				opacity: 0;
			}
		}
	}
</style>